<template>
	<div id="full-screen">
		<el-container>
			<el-header class="header">
				<div class="logo">
					<img src="../assets/img/login.png" alt="">
					<span>云慧约</span>
				</div>
				<div class="menu">
					<el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
					</el-button>
				</div>
			</el-header>
			
			<el-main class="main" >
				<div class="shebei">
					<h1 class="headline">窗口设备监控</h1>
					<div class="top">
						<div class="tv" v-for="(item,index) in obj.dp" :key="index">
							<img src="../assets/img/tv.png" alt="">
							<p v-if="obj.dp.length == 0 || obj.dp == null || obj.dp == '' " class="status">暂无设备</p>
							<p v-else class="status">
								<img v-if=" item.status == true " src="../assets/img/normal.png" alt="">
								<img v-else-if="item.status == false" class="icon blink" src="../assets/img/warn.png" alt="">
								<img v-else src="../assets/img/abnormal.png" alt="">
								<span v-if="item.status == true">运行正常</span>
								<span v-else>连接异常</span>
							</p>
						</div>
						<div class="tv" v-for="(item,index) in obj.qhj" :key="index">
							<img src="../assets/img/qhj.png" alt="">
							<p v-if="obj.qhj.length == 0 || obj.qhj == null || obj.qhj == '' " class="status">暂无设备</p>
							<p v-else class="status">
								<img v-if=" item.status == true " src="../assets/img/normal.png" alt="">
								<img v-else-if="item.status == false" class="icon blink" src="../assets/img/warn.png" alt="">
								<img v-else src="../assets/img/abnormal.png" alt="">
								<span v-if="item.status == true">运行正常</span>
								<span v-else>连接异常</span>
							</p>
						</div>
					</div>
					<div class="bottom">
						<div v-if="obj.equipment == null || obj.equipment.length == 0">窗口暂无设备</div>
						<div v-else class="card" v-for="(op,index) in obj.equipment" :key="index">
							<div class="img">
								<img v-if="op.pjq != null && op.hjq != null && op.led != null && op.hjq.status == false && op.pjq.status == false && op.led.status == false" src="../assets/img/window_1.png" alt="" alt="">
								<img v-else src="../assets/img/window_2.png" alt="">
								<span>{{op.windowName}}</span>
							</div>
							<p class="txt">
								<img class="txt-img" src="../assets/img/hjq.png" alt="">
								<span v-if="op.hjq == null">&nbsp;暂无设备</span>
								<span v-else>呼&nbsp;&nbsp;叫&nbsp;&nbsp;器</span>
								<img v-if="op.hjq !=null && op.hjq.status == true" class="icon" src="../assets/img/normal.png" alt="">
								<img v-else-if="op.hjq !=null && op.hjq.status == false" class="icon blink" src="../assets/img/warn.png" alt="">
								<img v-else class="icon" src="../assets/img/warn.png" alt="" style="opacity: 0;">
							</p>
							<p class="txt">
								<img  class="txt-img" src="../assets/img/pjq.png" alt="">
								<span v-if="op.pjq == null">&nbsp;暂无设备</span>
								<span v-else>评&nbsp;&nbsp;价&nbsp;&nbsp;器</span>
								<img v-if="op.pjq !=null && op.pjq.status == true" class="icon" src="../assets/img/normal.png" alt="">
								<img v-else-if="op.pjq !=null && op.pjq.status == false" class="icon blink" src="../assets/img/warn.png" alt="">
								<img v-else class="icon" src="../assets/img/warn.png" alt="" style="opacity: 0;">
							</p>
							<p class="txt">
								<img class="txt-img" src="../assets/img/led.png" alt="">
								<span v-if="op.led == null">&nbsp;暂无设备</span>
								<span v-else>&nbsp;&nbsp;L&nbsp;&nbsp;E&nbsp;&nbsp;D&nbsp;&nbsp;</span>
								<img v-if="op.led !=null && op.led.status == true" class="icon" src="../assets/img/normal.png" alt="">
								<img v-else-if="op.led !=null && op.led.status == false" class="icon blink" src="../assets/img/warn.png" alt="">
								<img v-else class="icon" src="../assets/img/warn.png" alt="" style="opacity: 0;">
							</p>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import {monitor} from '../api/getData.js'
export default {
	data:function(){
		return {
			obj:{},
			latticeid:''
		}
	},
	created() {
		this.getParams()
	}, // 创建时
	beforeMount: function () {}, // 挂载之前
	mounted() {}, // 挂载之后
	beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
	updated: function () {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function () {}, // 实例销毁后调用
	beforeRouteEnter(to, from, next){
		console.log(from.path)
		if(from.path == "/page/orgFullScreen"){
			next(vm=>{
				vm.getOrgMonitor()
			})
		}else{
			next(vm=>{
				vm.getMonitor()
			})
		}
		
	},
	methods:{
		getParams(){
			console.log(this.$route.query.id,"传来的参数")
			this.latticeid = this.$route.query.id 
		},
		getOrgMonitor(){
			monitor({
				latticeid:this.latticeid
			}).then((res) =>{
				console.log(res.data,"设备监控")
				this.obj = res.data
			}).catch((error) =>{
				console.log(error)
			})
		},
		getMonitor(){
			monitor({}).then((res) =>{
				console.log(res.data,"设备监控")
				this.obj = res.data
			}).catch((error) =>{
				console.log(error)
			})
		}
	}
}
</script>

<style lang='scss'>
#full-screen{
	height: 100%;
	box-sizing: border-box;
	min-width: 1200px;
	background: #f1f2f6;
	overflow-x: hidden;
	.header{
		background-color: #fff;
		padding: 0 40px;
		color: #333;
		text-align: center;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: #ccc 1px 1px 10px;
		z-index: 9;
		position: fixed;
		width: 100%;
		top:0;
		left:0;
		.logo{
			display: flex;
			align-items: center;
			font-size: 20px;
			color: #4381ED;
			img{
				width: 42px;
				height: 28px;
				margin-right: 10px;
			}
		}
		.menu{
			display: flex;
			align-items: center;
		}
		
	}
	.main{
		margin: 100px auto 0;
		width: 96%;
		height: 96%;
		background: #fff;
		overflow-y: auto;
		.shebei{
			.headline{
				text-align: center;
				font-size: 26px;
				color: #000000;
				margin-top: 10px;
			}
			.top{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 60px;
				padding: 0 10%;
				.tv{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.status{
					display: flex;
					align-items: center;
					margin-top: 16px;
					img{
						width: 12px;
						height: 12px;
						margin-right: 8px;
					}
				}
			}
			.bottom{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 70px 158px 0;
				.card{
					display: flex;
					flex-direction: column;
					align-items: center;
					width:25%;
					margin-bottom:40px;
					.img{
						width: 128px;
						height: 128px;
						margin-bottom: 10px;
						position: relative;
						img{
							position: absolute;
							width: 100%;
							height: 100%;
							top:0;
							left:0;
							right:0;
							bottom: 0;
						}
						span{
							position: absolute;
							top: 28px;
							width: 100%;
							text-align: center;
							color: #333;
							font-size: 12px;
						}
					}
					.txt{
						display: flex;
						align-items: center;
						justify-content: space-between;
						/* padding: 0 8px; */
						margin-top: 10px;
						.txt-img{
							width: 18px;
							height: 20px;
							margin-right: 10px;
						}
						.icon{
							width: 14px;
							height: 14px;
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
	.blink{
		/* color: #dd4814; */
		animation: blink 1s linear infinite;  
		/* 其它浏览器兼容性前缀 */
		-webkit-animation: blink 1s linear infinite;
		-moz-animation: blink 1s linear infinite;
		-ms-animation: blink 1s linear infinite;
		-o-animation: blink 1s linear infinite;
	}
	/* 定义keyframe动画，命名为blink */
	@keyframes blink{
	  0%{opacity: 1;}
	  100%{opacity: 0;} 
	}
	@-webkit-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-moz-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-ms-keyframes blink {
		0% {opacity: 1; } 
		100% { opacity: 0;}
	}
	@-o-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	.people {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.people1 {
			box-sizing: border-box;
			margin: 30px 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 10px 30px;
			font-size: 18px;
		}
	}
}
</style>
